<template>
	<view class="home_category">
        <navigator class="cate_item"
		v-for="item in category"
		:key="item.id"
		:url="`/pages/imgCategory/index?id=${item.id}`"
		>
			<image mode="aspectFill" :src="item.cover"></image>
			<view class="cate_name">{{item.name}}</view>
		</navigator> 
	</view>
</template>
 
<script>

	export default {
		data(){
			return{
				category:[]
			}
		},
		mounted(){
			
			this.getList();
		},
		methods:{
			getList(){
				this.request({
					url: 'http://service.picasso.adesk.com/v1/vertical/category'
				})
				.then(result=>{
					// console.log(result);
					this.category = result.res.category;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home_category {
	display: flex;
	flex-wrap: wrap;
  .cate_item {
	  width: 33.33%;
	  position: relative;
    image {
		height: 240rpx;

    }

    .cate_name {
		position: absolute;
		width: 100%;	
		height: 60rpx;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		background-image: linear-gradient(to right top,rgba(0,0,0,.2),rgba(0,0,0,0));

    }
  }
}
	
</style>